<template>
  <div class="baseDatilebox">
    <div class="box-item">
      <div class="box-item-header">
        <div class="item-left">
          <a-tooltip placement="topRight" overlayClassName="bgc_tooltip2">
            <template slot="title">
              <span>{{ itemData.tableName }}</span>
            </template>
            <span class="box-card-title">{{ itemData.tableName }}</span>
          </a-tooltip>
        </div>
        <div class="item-right">
          <a-tooltip placement="topLeft" overlayClassName="bgc_tooltip2">
            <template slot="title">
              <span>模板下载</span>
            </template>
            <a-button @click="OnDownLoad(itemData)" class="box-card-down"><a-icon type="download" /></a-button>
          </a-tooltip>
        </div>
      </div>
      <div class="box-item-content">
        <div class="item-content-text">
          <p>
            共上报<span class="item-content-b">{{ itemData.uploadNum }}</span
            >次
          </p>
          <p>
            共<span class="item-content-b">{{ itemData.dataNum }}</span
            >万条数据
          </p>
          <p>
            最后上报时间：<span class="item-content-b">{{ itemData.updateTime | updateTime }}</span>
          </p>
        </div>
      </div>
      <div class="item-footer">
        <a-button class="item-search-data" @click="DataCheck">数据查询</a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseDatilebox',
  props: {
    itemData: {
      type: Object,
      default: {},
    },
  },
  filters: {
    updateTime(time) {
      return time.split(' ')[0]
    },
  },
  methods: {
    OnDownLoad(record) {
      debugger
      this.$message.success('正在下载，请稍等！')
      let url = `${window._CONFIG['domianURL']}/sys/common/static/${record.path}`
      window.open(url, '_blank')
    },
    DataCheck() {
       this.$emit('DataCheck',this.itemData)
    },
  },
}
</script>

<style lang="less">
.bgc_tooltip2 {
  .ant-tooltip-inner {
    color: #2e4cba;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
.baseDatilebox {
  width: 210px;
  height: 165px;
  margin: 12px 15px;
  padding: 5px 0px 10px 0px;
  box-shadow: 2px 2px 5px #2e4cba;
  border: 1px solid #2e4cba;
  border-radius: 5px;
  box-sizing: content-box;
  .box-item {
    width: 100%;
    .box-item-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .item-left {
        width: 87%;
        overflow: hidden;
        text-overflow: ellipsis;
        .box-card-title {
          cursor: pointer;
          white-space: nowrap;
          text-align: left;
          font-weight: 700;
          color: white;
          background-color: #2e4cba;
        }
      }
      .item-right {
        width: 13%;
        .box-card-down {
          padding: 0px 0px;
          margin-right: 5px;
          width: 25px;
          height: 20px;
          background-color: #2e4cba73;
          .anticon {
            color: #2e4cba;
          }
        }
      }
    }
  }
  .box-item-content {
    .item-content-text {
      width: 95%;
      margin: 10px;
      p {
        margin-bottom: 8px;
        span {
          font-weight: 700;
        }
      }
    }
    .item-content-b {
      color: #2e4cba;
    }
    .item-content-y {
    }
  }
  .item-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    .item-search-data {
      width: 90%;
      height: 30px;
      border: 1px solid #2e4cba;
      color: #2e4cba;
      margin-top: 10px;
    }
  }
}
.baseDatilebox:hover {
  box-shadow: 2px 2px 5px #ef9325;
  border: 1px solid #ef9325;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  .box-item-header {
    .item-left {
      .box-card-title {
        background-color: #ef9325;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
    .item-right {
      .box-card-down {
        background-color: #ef93256e;
        .anticon {
          color: #ef9325;
        }
      }
    }
  }

  .item-content-b {
    color: #ef9325;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .item-search-data {
    border: 1px solid #ef9325;
    color: white;
    background-color: #ef9325;
  }
  /deep/ .ant-btn:hover {
    border-color: #ef9325;
  }
}
</style>